<template>
  <view class="content">
    <view class="logo-content">
        <image
            class="logo"
            src="/static/h5/logo.svg"
            mode="widthFix"
            ></image>
            <view class="title">潮玩君│让短视频变现更容易</view>
            <view class="info">CHAOWANJUN</view>
           <view class="input-view">
                {{defIndex === 0 ? '+86': "账号"}} <input maxlength="11" placeholder="请输入手机号" v-model="phone" type="text">
           </view>
           <view v-if="defIndex === 0" class="input-view">
                <input  v-model="code"   placeholder="请输入验证码" type="text">
                 <view  @click="getCode" class="code"> {{second === 59 && !clickStatus ? '获取验证码' : second === 0 ? '重新获取' : `已发送(${second})` }}</view>
           </view>

           <view v-else class="input-view">
                <input  v-model="password"  placeholder="请输入密码" type="password">
           </view>

           <view class="agee">
                <fui-label>
                    <view class="fui-align__center">
                        <fui-checkbox scaleRatio="0.65" value="1" checked></fui-checkbox>
                    </view>
                </fui-label>
                登录即代表你已同意<text @click="toHtml(EnumWebViewSrc.ServiceAgreement)">服务协议</text>
                 与 <text @click="toHtml(EnumWebViewSrc.PrivacyAgreement)">隐私政策</text>
            </view>

            <view @click="login" class="logo-view">确定登录</view>
    </view>
    <view class="login-type">
     <view @click="updateIndex(index)" v-for="(item,index) in loginTypes"> 
        <fui-icon color="#fff" :name="item.icon" :size="size"></fui-icon> 
        <text  :class="defIndex === index ? 'color-item' :''">{{item.name}}</text>
    </view>
  </view>
  </view>
</template>

<script setup lang="ts">
import loginService from "@/api/loginService";
import  { EnumWebViewSrc } from '@/utils/constants'
import userStore from "@/store/user";
import dyUserCodeService from "@/api/dyUserCodeService";
const size = ref(40)
const defIndex = ref(0)
const phone = ref("")
const code = ref("")
const password =ref("")
const inviteCode = ref()
const loginTypes = ref([
 {
    name:'验证码登录',
    icon:'mail'
 },
 {
    name:'密码登录',
    icon:'mobile'
 }
])
const updateIndex = (index:number)=>{
    defIndex.value = index
}
const second = ref(59)
const ntervalId = ref()
const clickStatus = ref(false)
const startTimer = () => {
    ntervalId.value =  setInterval(() => {
        if(second.value > 0){
            second.value-=1
        }else{
            clickStatus.value = false
            clearInterval(ntervalId.value); // 在重置时清除 interval
        }
    }, 1000); // 每秒执行一次
};
const getCode =async ()=>{
    if(!phone.value){
        uni.showToast({
            title: '手机号为空',
            duration: 2000,
            icon:"none"
        })
        return
    }
    if(!clickStatus.value){
        try{
            const {success,result} = await loginService.sms({
            mobile:phone.value,
            smsmode:0
            })
            if(success){
                clickStatus.value = true
                second.value = 59
                startTimer()
            }
        }catch(e:any){
            if(e.success){
                clickStatus.value = true
                second.value = 59
                startTimer()
            }else{
                uni.showToast({
                    title: e.message,
                    duration: 2000,
                    icon:"none"
                })
            }
        }
    }
}

const login = async ()=>{
    uni.showLoading()
    const  user = userStore()
    if( phone.value === ""){
        uni.showToast({
            title: "账号或者手机号",
            duration: 2000,
            icon:"none"
        })
        return
    }
    if( defIndex.value === 0 && code.value === ""){
        uni.showToast({
            title: "请输入验证码",
            duration: 2000,
            icon:"none"
        })
        return
    }


    if( !(defIndex.value === 0) && password.value === ""){
        uni.showToast({
            title: "请输入密码",
            duration: 2000,
            icon:"none"
        })
        return
    }

    const res  = defIndex.value === 0 ?  await user.codeLogin({
        captcha:code.value,
        grant_type:"phone",
        mobile:phone.value,
        tenantCode:"T1000"
    }) : await user.accountLogin({
        username:phone.value,
        password:password.value,
        grant_type:"app",
        tenantCode:"T1000"
    })

    uni.hideLoading()
    if(res){
        uni.switchTab({
            url:'/pages/user/user'
        })
        if(inviteCode.value){
            // 发送绑定
          const {success} = await dyUserCodeService.bindingCode({code:inviteCode.value})
          if(success){
            inviteCode.value = undefined
          }
        }

    }else{
        uni.showToast({
            title: "登录失败",
            duration: 2000,
            icon:"none"
        })
    }
}

const toHtml = (url:any) =>{
    uni.navigateTo({
    url: `/subPackages_setting/webView/webView?src=${url}`,
  })
}

onLoad((data:any)=>{
    inviteCode.value = data.code
})

</script>

<style lang="scss" scoped>
page{
    width: 100%;
    height: 100%;  
}
.content{
    width: 100%;
    height: 100%;
    background-color: black;    
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    .logo-content{
        text-align: center;
        color: white;
        .logo{
            width: 200rpx;
            border-radius: 20rpx;
        }
        .title{
            font-size: 34rpx;
        }
        .info{
            font-size: 30rpx;
            color: rgb(213, 235, 255);
        }
        .input-view{
            width: 600rpx;
            height: 120rpx;
            margin-bottom: 20rpx;
            border-bottom: 2rpx coral solid;
            display: flex;
            align-items: center;
            padding-left: 20rpx;
            input{
                text-align: left;
                margin-left: 20rpx;
            }
            .code{
                display: flex;
                justify-content: center;
                align-items: center;
                padding: 15rpx 25rpx;
                font-size: 23rpx;
                color: rgb(3, 32, 23);
                border-radius: 30rpx;
                background:rgb(230,230,230);
            }
        }
        .agee{
            position: static;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 24rpx;
          .fui-align__center{
            margin-right: 10rpx;
            display: flex;
            justify-content: center;
            align-items: center;
          }
          text{
            color: aqua;
            margin: 0 5rpx;
          }
        }
        .logo-view{
            height: 90rpx;
            line-height: 90rpx;
            border-radius: 30rpx;
            background: #bdbdbd;
            margin-top: 100rpx;
        }
    }

    .login-type{
        position: fixed;
        top: 90%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 25rpx;
        width: 100%;
        color: white;
        view{
            display: flex;
            align-items: center;
            justify-content: center;
            text{
                margin-left: 10rpx;
            }
            .color-item{
                color: aquamarine;
            }
        }
    }
}


</style>
